<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>本页面用于演示标准文件流相关知识</title>
		<style>
			img{
				border:  #006400 solid 1px;
			}
			/*宽高设置对块级元素生效*/
			h1 {height: 70px; width: 300px;}
			/*宽高设置对行内元素无效*/
			span{ height: 100px; width: 300px;}
			#div1{
				background-color: #008000;
				height: 100px;
				width: 200px;
				padding: 5px;
			}
			#div2{
				background-color: #8B4513;
			}
			#p1 {
				color: #CD5C5C;
				
			}
			#div3, #div4 {
				display: inline;
				height: 100px;
				width: 100px;
			}
			.span_block{
				display: block;  background-color: #8A2BE2;
				height: initial;
				width: initial;
			}
		</style>
	</head>
	<body>
		<img src="../20190305/imgs/2.png" />
		<img src="../20190228/imgs/1.jpg" height="100" />
		<span>asdfsfd</span>
		
		<p>阿是的</p>
		<h1>H1是块级元素</h1>
		<span>span是行内元素</span><span>222222</span><span>33333 </span>
	    <div id="div1">
			<div id="div2">33 </div>
		</div>
		
		<p id="p1">
			这是一个p
			<img src="../20190305/imgs/2.png" />
			<br />
			<input type="text" name="txtName" id="txtName" value="" />
			<input type="button" id="btnClick" value="点我" />
			
			<!--p内不能放p,不能放h1,不能放ul。浏览器解析式会把这些标签。解析到p标签相邻的位置-->
			<p>asdfasdf</p>
			<h1>神马！</h1>
			<ul>
				<li>111</li>
				<li>222</li>
				<!--避免列表中写入除了li之外的标签。下面这个p是不规范的--> 
				<p>dddd</p>
			</ul>
		</p>
		
		<div id="div3">ffff</div><span>水电费的方法</span>
		<div id="div4">团</div>
		
		<span class="span_block">33</span>
	</body>
</html>
